<!DOCTYPE html> 
<html id="doc" style="width: 100%; height: 100%"> 
    <head> 
        <title>Grid View Example</title> 
        
        <!--jQuery Mobile-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script>
        
        function InitApp()
        {
    				var gridBodyPos = $("#div-item").offset();
    
            var widths = [120, 180, 120, 190, 250, 134];
            var titles = ['Header1', 'Header2', 'Header3', 'Header4', 'Header5', 'Header6'];
            var Data = new Object();
            Data["widths"] = widths;
            Data["titles"] = titles;
    
            var HEAD = JSON.stringify(Data);
            var head = $.parseJSON(HEAD);
    
            var gridHeight = 400;
            var gridWidth = 600;
            var scrollBarWidth = getScrollSizes(); //get scroll bar's width.
    
            $("#div-header").css("width", (gridWidth - scrollBarWidth+2) + "px");
            $("#div-header").css("height", "27px");
            $("#div-header").css("top", gridBodyPos.top-20 +"px");
            $("#div-header").css("left", gridBodyPos.left+"px");
            $("#div-header").css("position", "absolute");
            var gridHeaderHeight = $("#div-header").css("height");
    
            //$("#div-header-hack").css("width", (scrollBarWidth) + "px");
            //$("#div-header-hack").css("height", "25px"); //gridHeaderHeight);
            $("#div-item").css("width", (gridWidth+2) + "px");
            
            //$("#div-header-hack").css("left", (gridWidth - scrollBarWidth) + "px");
            
            $("#div-item").css("max-height", (gridHeight) + "px");
            
            //add header and item divs, directly in HTML Or in javascript.
            var header = '<div style="min-width: 1000px;">' +
                '<div style="width: '+head.widths[0]+'px" class="header"><p>'+head.titles[0]+'</p></div>' +
                '<div style="width: '+head.widths[1]+'px" class="header"><p>'+head.titles[1]+'</p></div>' +
                '<div style="width: '+head.widths[2]+'px" class="header"><p>'+head.titles[2]+'0</p></div>' +
                '<div style="width: '+head.widths[3]+'px" class="header"><p>'+head.titles[3]+'</p></div>' +
                '<div style="width: '+head.widths[4]+'px" class="header"><p>'+head.titles[4]+'</p></div>' +
                '<div style="width: '+head.widths[5]+'px" class="header"><p>'+head.titles[5]+'</p></div>' +
            '</div>';

             $("#div-header").append(header);

				 //## Fixed Header
				 var fixWidth = parseInt(head.widths[0],10) + parseInt(head.widths[1],10);
				 var fixHeader =  '<div style="min-width: '+fixWidth+'px;position: absolute;top:'+ (parseInt(gridBodyPos.top,10)-20) +'px;left:'+gridBodyPos.left+'px;">' +
					'<div style="width: '+head.widths[0]+'px" class="fixed-header1"><p>'+head.titles[0]+'</p></div>' +
					'<div style="width: '+head.widths[1]+'px" class="fixed-header"><p>'+head.titles[1]+'7</p></div>' +
				'</div>';
				$('body').append(fixHeader);

				 //## -------------------------------------------------
             $("#div-item").append(header);
             var fixBody = '<div id="fixItems" style="overflow: hidden;  height: '+(gridHeight-44)+'px; min-width: '+fixWidth+'px;position: absolute;top:'+(gridBodyPos.top+7)+'px;left:'+gridBodyPos.left+'px;">';

             for(var index = 0; index < 600; index ++)
             {
                 if(index%2 == 0) var bgColor = "background-color: #d1eaf5;";
                 else var bgColor = "background-color: #FFF;";
                 var item = '<div style="min-width: 1000px; ">' +
                         '<div style="width: '+head.widths[0]+'px;'+bgColor+'" class="itemStyle"><p>Item ['+index+']</p></div>' +
                         '<div style="width: '+head.widths[1]+'px;'+bgColor+'" class="itemStyle"><p>Item 2</p></div>' +
                         '<div style="width: '+head.widths[2]+'px;'+bgColor+'" class="itemStyle"><p>Item ['+index+']</p></div>' +
                         '<div style="width: '+head.widths[3]+'px;'+bgColor+'" class="itemStyle"><p>Item 4</p></div>' +
                         '<div style="width: '+head.widths[4]+'px;'+bgColor+'" class="itemStyle"><p>Item 5</p></div>' +
                         '<div style="width: '+head.widths[5]+'px;'+bgColor+'" class="itemStyle"><p>Item 6</p></div>' +
                         '</div>';
                 $("#div-item").append(item);
					 fixBody += '<div style="min-width: '+fixWidth+'px;">' +
                             '<div style="width: '+head.widths[0]+'px;'+bgColor+'" class="itemStyle"><p>Item ['+index+']</p></div>' +
                             '<div style="width: '+head.widths[1]+'px;'+bgColor+'" class="fixed-item-end"><p>Item 2</p></div>' +
                             '</div>';
                 }
				 fixBody += "</div>";
				 
				$('body').append(fixBody);
        }
        
        function ScrollHeader()
        {
            $("#div-header").scrollLeft($("#div-item").scrollLeft());
            $("#fixItems").scrollTop($("#div-item").scrollTop());
        }
            
        //refernce - http://stackoverflow.com/questions/457262/html-what-is-the-height-of-a-horizontal-scrollbar
        function getScrollSizes() 
        { 
            // call after document is finished loading
            var el= document.createElement('div');
            el.style.display= 'hidden';
            el.style.overflow= 'scroll';
            document.body.appendChild(el);
            var h= el.offsetHeight-el.clientHeight;
            document.body.removeChild(el);
            return h;
        }
        $(document).ready(function() {
            InitApp();
        });
    </script>
    <style>
            .header { display: inline-block; background: linear-gradient( to bottom, #f2F2F2, #a6d2ff ); color:#333; font-family: Verdana; font-size: 10pt; height:25px; border-left:1px #F2F2F2 solid; border-top:1px #CCC solid;border-bottom:1px #CCC solid;}
            .fixed-header1 { display: inline-block; background: linear-gradient( to bottom, #FFF, #a6d2ff ); color:#333; font-family: Verdana; font-size: 10pt; height:25px; border-left:1px #F2F2F2 solid; border-top:1px #CCC solid;border-bottom:1px #CCC solid;}
            .fixed-header { display: inline-block; background: linear-gradient( to bottom, #FFF, #a6d2ff ); color:#333; font-family: Verdana; font-size: 10pt; height:25px; border-left:1px #F2F2F2 solid; border-top:1px #CCC solid;border-bottom:1px #CCC solid; }
            .itemStyle { display: inline-block; font-family: Verdana; font-size: 10pt; height:25px; border:1px #A6C9E2 solid; margin-right:-1px; margin-top:-1px;}
            .fixed-item { display: inline-block; font-family: Verdana; font-size: 10pt; height:25px; border:1px #A6C9E2 solid; margin-top:-1px;}
            .fixed-item-end { display: inline-block; font-family: Verdana; font-size: 10pt; height:25px; border:1px #A6C9E2 solid; margin-top:-1px;}
    			p {  padding:3px 0 0 5px;margin-top:0; }
    </style>
        </head> 
    
        <body id="doc-body" style="margin:0">
    	<br>
    <div id="grid">
        <!--If you don't need header background color you don't need this div.-->
        <!--
        <div id="div-header-hack" style="position: absolute;background: linear-gradient( to bottom, #f2F2F2, #a6d2ff );border-left:1px #F2F2F2 solid; border-top:1px #CCC solid;border-right:1px #CCC solid;border-bottom:1px #CCC solid;"></div>
-->
        <div id="div-header" style=" overflow: hidden; height: 20px;">
        </div>

        <div id="div-item" style="overflow: auto" onscroll="ScrollHeader()">
        </div>
    </div>
</html>